<template>
  <div class="consultation-list" ref="listContainer">
    <div class="consultation-cards" v-if="list.length > 0">
      <div
        class="consultation-card"
        v-for="item in list"
        :key="item.id"
        @click="router.push(`/consultation/chat/${item.id}`)"
      >
        <div class="card-header">
          <van-image
            round
            width="40"
            height="40"
            :src="item.doctorAvatar || '/avatar-default.png'"
          />
          <div class="doctor-info">
            <span class="name">{{ item.doctorName }}</span>
            <span class="time">{{ formatTime(item.createTime) }}</span>
          </div>
          <van-tag :type="getStatusType(item.status)">
            {{ getStatusText(item.status) }}
          </van-tag>
        </div>
        <div class="card-content" v-if="item.diagnosis">
          <div class="diagnosis">
            <span class="label">诊断建议：</span>
            <span class="text">{{ item.diagnosis }}</span>
          </div>
        </div>
      </div>
      <div class="bottom-space"></div>
    </div>
    <div class="empty-wrapper" v-else>
      <van-empty description="暂无问诊记录" />
    </div>
  </div>
</template>

<script setup>
import { defineProps, ref, onMounted, watch } from 'vue'
import { useRouter } from 'vue-router'
import dayjs from 'dayjs'

const router = useRouter()
const listContainer = ref(null)

const props = defineProps({
  list: {
    type: Array,
    default: () => []
  }
})

// 监听列表变化，滚动到顶部
watch(() => props.list, () => {
  if (listContainer.value) {
    listContainer.value.scrollTop = 0
  }
}, { deep: true })

// 格式化时间
const formatTime = (time) => {
  return dayjs(time).format('YYYY-MM-DD HH:mm')
}

// 获取状态类型
const getStatusType = (status) => {
  const types = {
    0: 'warning',
    1: 'primary',
    2: 'success',
    3: 'danger'
  }
  return types[status] || 'default'
}

// 获取状态文本
const getStatusText = (status) => {
  const texts = {
    0: '待接诊',
    1: '问诊中',
    2: '已完成',
    3: '已取消'
  }
  return texts[status] || '未知'
}
</script>

<style lang="scss" scoped>
.consultation-list {
  padding: 12px 12px 0;
  background-color: #f7f8fa;
  height: calc(100vh - 46px); // 减去头部导航高度
  overflow-y: auto;
  box-sizing: border-box;

  .consultation-cards {
    .consultation-card {
      background: #fff;
      border-radius: 8px;
      padding: 16px;
      margin-bottom: 12px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);

      &:active {
        background-color: #f5f5f5;
      }

      .card-header {
        display: flex;
        align-items: center;
        margin-bottom: 12px;

        .doctor-info {
          flex: 1;
          margin: 0 12px;

          .name {
            font-size: 16px;
            font-weight: 500;
            color: #323233;
            display: block;
          }

          .time {
            font-size: 12px;
            color: #969799;
            margin-top: 4px;
            display: block;
          }
        }

        .van-tag {
          flex-shrink: 0;
        }
      }

      .card-content {
        border-top: 1px solid #f5f5f5;
        padding-top: 12px;

        .diagnosis {
          font-size: 14px;
          color: #646566;

          .label {
            color: #969799;
          }

          .text {
            margin-left: 4px;
          }
        }
      }
    }

    .bottom-space {
      height: 80px; // 底部留白，确保最后一条数据可以完全显示
    }
  }

  .empty-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 90px);
    padding: 32px 0;
  }
}
</style>
